import React, { useState, useEffect } from 'react';
import axios from 'axios';

const PersonalInfoForm = ({ applicationId }) => {
    const [personalInfo, setPersonalInfo] = useState({
        name: '',
        gender: '',
        idCardNo: '',
        phoneNumber: '',
        politicalStatus: '',
        highestEducation: '',
        highestDegree: '',
        graduationDate: '',
        graduationSchool: '',
        major: '',
        workUnit: '',
        workPosition: '',
        technicalWorkYears: 0,
        joinWorkDate: '',
        photoPath: ''
    });

    useEffect(() => {
        const fetchPersonalInfo = async () => {
            try {
                const response = await axios.get(`/api/applications/${applicationId}/personal-info`);
                setPersonalInfo(response.data);
            } catch (error) {
                console.error('Error fetching personal info:', error);
            }
        };

        if (applicationId) {
            fetchPersonalInfo();
        }
    }, [applicationId]);

    const handleChange = (e) => {
        const { name, value } = e.target;
        setPersonalInfo(prevInfo => ({
            ...prevInfo,
            [name]: value
        }));
    };

    const handleSubmit = async (e) => {
        e.preventDefault();
        try {
            await axios.post(`/api/applications/${applicationId}/personal-info`, personalInfo);
            alert('个人基本信息保存成功！');
        } catch (error) {
            console.error('Error saving personal info:', error);
            alert('保存失败，请重试。');
        }
    };

    return (
        <form onSubmit={handleSubmit} className="form-container">
            <h3>基本信息</h3>
            <div className="form-group">
                <label>姓名:</label>
                <input type="text" name="name" value={personalInfo.name} onChange={handleChange} required />
            </div>
            <div className="form-group">
                <label>性别:</label>
                <input type="text" name="gender" value={personalInfo.gender} onChange={handleChange} required />
            </div>
            <div className="form-group">
                <label>证件号码:</label>
                <input type="text" name="idCardNo" value={personalInfo.idCardNo} onChange={handleChange} required />
            </div>
            <div className="form-group">
                <label>移动电话:</label>
                <input type="text" name="phoneNumber" value={personalInfo.phoneNumber} onChange={handleChange} required />
            </div>
            <div className="form-group">
                <label>政治面貌:</label>
                <input type="text" name="politicalStatus" value={personalInfo.politicalStatus} onChange={handleChange} />
            </div>
            <div className="form-group">
                <label>最高学历:</label>
                <input type="text" name="highestEducation" value={personalInfo.highestEducation} onChange={handleChange} />
            </div>
            <div className="form-group">
                <label>最高学位:</label>
                <input type="text" name="highestDegree" value={personalInfo.highestDegree} onChange={handleChange} />
            </div>
            <div className="form-group">
                <label>毕业时间:</label>
                <input type="date" name="graduationDate" value={personalInfo.graduationDate} onChange={handleChange} />
            </div>
            <div className="form-group">
                <label>毕业院校:</label>
                <input type="text" name="graduationSchool" value={personalInfo.graduationSchool} onChange={handleChange} />
            </div>
            <div className="form-group">
                <label>所学专业:</label>
                <input type="text" name="major" value={personalInfo.major} onChange={handleChange} />
            </div>
            <div className="form-group">
                <label>工作单位:</label>
                <input type="text" name="workUnit" value={personalInfo.workUnit} onChange={handleChange} />
            </div>
            <div className="form-group">
                <label>工作岗位:</label>
                <input type="text" name="workPosition" value={personalInfo.workPosition} onChange={handleChange} />
            </div>
            <div className="form-group">
                <label>从事专业技术工作年限:</label>
                <input type="number" name="technicalWorkYears" value={personalInfo.technicalWorkYears} onChange={handleChange} />
            </div>
            <div className="form-group">
                <label>参加工作时间:</label>
                <input type="date" name="joinWorkDate" value={personalInfo.joinWorkDate} onChange={handleChange} />
            </div>
            <div className="form-group">
                <label>照片路径:</label>
                <input type="text" name="photoPath" value={personalInfo.photoPath} onChange={handleChange} />
            </div>
            <button type="submit">保存</button>
        </form>
    );
};

export default PersonalInfoForm;

